import React, { Component } from 'react'
import { StyleSheet, Image, View,Text, ActivityIndicator,TextInput, StatusBar, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Spinner from 'react-native-loading-spinner-overlay'

import screen from '../utils/screen'
import { createAction, NavigationActions } from '../utils'

const oneImg = require('../images/login/mobile.png')
const twoImg = require('../images/login/password.png')

@connect(({ app, loading }) => ({ ...app, isLoading: loading.models.app }))
class Login extends Component {
  static navigationOptions = {
    title: '登录',
  }

  componentDidMount() {
    this.props.dispatch(createAction("app/loadStorage")())
  }

  onLogin = () => {
    this.props.dispatch(createAction('app/login')())
  }

  userNameChange = (text) => {
    this.props.dispatch(createAction("app/modifyState")({"userName": text}))
  }

  passwordChange = (text) => {
    this.props.dispatch(createAction("app/modifyState")({"userPassword": text}))
  }

  render() {
    const { userName,userPassword, isLoading } = this.props;
    return (
      <KeyboardAwareScrollView>
        <StatusBar
          translucent={true}
          hidden={true}
        />
        <Spinner visible={isLoading} />
        <View style={styles.container}>
          <View style={{alignItems: 'center'}}>
            <Text style={styles.title}>财务管理</Text>
          </View>
          <View style={styles.inputWrap}>
            <View style={styles.iconWrap}>
              <Image source={oneImg} style={styles.icon} resizeMode="contain" />
            </View>
            <View style={{flex: 1}}>
              <TextInput
                value={userName}
                onChangeText={this.userNameChange}
                underlineColorAndroid="transparent"
                placeholder="请输入账号"
                placeholderTextColor="#b2b2b2"
                style={styles.input}
                required
              />
            </View>
          </View>
          <View style={styles.inputWrap}>
            <View style={styles.iconWrap}>
              <Image source={twoImg} style={styles.icon} resizeMode="contain" />
            </View>
            <View style={{flex: 1}}>
              <TextInput
                onChangeText={this.passwordChange}
                value={userPassword}
                underlineColorAndroid="transparent"
                placeholderTextColor="#b2b2b2"
                placeholder="请输入密码"
                style={styles.input}
                secureTextEntry
              />
            </View>
          </View>
          <TouchableOpacity onPress={this.onLogin} activeOpacity={.5} >
            <View style={styles.loginBtn}>
              <Text style={styles.buttonText}>登录</Text>
            </View>
          </TouchableOpacity>
        </View>
      </KeyboardAwareScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: screen.pxToDp(80),
  },
  title: {
    fontSize: screen.pxToDp(82),
    color: '#00299f',
    marginVertical: screen.pxToDp(170)
  },
  inputWrap: {
    flexDirection: "row",
    marginVertical: screen.pxToDp(20),
    height: screen.pxToDp(80),
    borderBottomWidth: 1,
    borderBottomColor: "#b2b2b2",
    alignItems: 'center'
  },
  iconWrap: {
    paddingHorizontal: screen.pxToDp(7),
    alignItems: "center",
    justifyContent: "center",
  },
  icon: {
    height: screen.pxToDp(45),
    width: screen.pxToDp(30),
  },
  input: {
    flex: 1,
    paddingHorizontal: screen.pxToDp(10),
    padding: 0,
    color: '#333333'
  },
  loginBtn: {
    backgroundColor: "#2a93f5",
    paddingVertical: screen.pxToDp(15),
    alignItems: "center",
    borderRadius: screen.pxToDp(0),
    justifyContent: "center",
    marginTop: screen.pxToDp(30),
    height: screen.pxToDp(90)
  },
  buttonText: {
    color: "white",
    fontSize: screen.pxToDp(32)
  },
})

export default Login
